<template>
  <!-- 活动订单详情页 -->
  <van-pull-refresh class="wrap van_pull_refresh" v-if="detail"
                    v-model="loading"
                    @refresh="getDetail"
  >
    <Header :title="orderStatusEnum[detail?.status]" style="background: white"/>

    <div class="card" v-if="detail?.refundNumber">
      <div
          class="row"
          style="justify-content: space-between; width: 100%"
          @click="toRefundList"
      >
        <text>有{{detail?.refundNumber?.split(',').length}}笔售后单</text>
        <text>查看详情></text>
      </div>
    </div>
    <div style="height: 10px"></div>
    <OrderDetailInfo :data="detail" :type="route.query.type"></OrderDetailInfo>
    <div v-if="route.query.type!=='coupon'">
      <div style="height: 10px"></div>
      <div class="card">签到后获得 1 积分</div>
      <div style="height: 10px"></div>

    </div>
    <div class="card" v-if="detail?.spuListVos?.[0].reservationType==0 ">
      <text>温馨提示:</text>
      <div>
        <text class="subText"
        >参会用户在活动签到现场,向工作人员出示活动凭证即可!若购买商品需要押金,签到成功后押金会在 1 个工作日内原路返回.

        </text>
      </div>
    </div>
    <div style="height: 10px"></div>

    <div>
      <div class="card">
        <div class="row" style="width: 100%">
          <a style="flex-grow: 1; color: black" :href="`tel:${detail.merchantTelephone}`">
            <div
                style="display: flex; flex-direction: column; align-items: center"
            >
              <van-icon name="phone-circle-o"/>
              <text>联系客服</text>
            </div>
          </a>
          <div style="flex-grow: 1; color: black" @click="()=>{router.push('/')}">
            <div
                style="display: flex; flex-direction: column; align-items: center"
            >
              <van-icon name="home-o"/>
              <text>首页</text>
            </div>
          </div>
          <!-- <div style="flex-grow: 1"></div> -->
          <div
              style="
              display: flex;
              flex-direction: column;
              align-items: center;
              flex-grow: 1;
            "
              @click="toRefund"
              v-if="
            (   detail?.status==1 && detail?.spuListVos?.length
              &&( detail?.spuListVos?.[0].refundType==='1' )
              && detail?.spuListVos?.[0].skuTotalPrice
               && ! detail?.orderTicketVos?.some((e)=>e.state==1))

               || detail?.isRefund===0

"

          >
            <van-icon name="bill-o"/>

            <text>退订</text>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 60px"></div>

    <!-- 未支付订单显示 -->

    <!-- <uni-popup ref="csPop" type="center">
      <uni-popup-dialog
        mode="base"
        message="成功消息"
        title="提示"
        content="如遇问题,请您拨打客服电话:010-89482008?"
        :duration="2000"
        :before-close="true"
        @close="close"
        @confirm="confirm"
      ></uni-popup-dialog>
    </uni-popup> -->
  </van-pull-refresh>
  <van-sticky :offset-bottom="0" position="bottom" v-if="detail?.status == 0">
    <div
        class="row"
        style="
          align-items: center;
          justify-content: end;
          width: 100%;
          background-color: white;
          padding: 5px;
          box-sizing: border-box;
        "
    >
      <div style="flex-grow: 1"></div>
      <text>合计：</text>
      <div class="row" style="align-items: center">
        <div v-if="coins > 0" class="row">
          <text class="moneyText" style="font-weight: bold"
          >{{
              coins
            }}
            <text class="moneyText" style="font-size: 10px">积分</text>
          </text>
        </div>
        <img
            v-if="coins > 0 && price > 0"
            src="@/views/activityPages/assets/add5464.png"
            style="width: 12px; height: 12px"
        />
        <text v-if="price > 0" class="moneyText" style="font-weight: bold"
        >￥{{ price }}
        </text
        >

        <text v-if="price <= 0 && coins <= 0" class="moneyTextFree"
        >免费
        </text
        >
      </div>
      <div style="width: 20px"></div>
      <van-button
          type="primary"
          color="#ec6a2d"
          round
          @click="toPay"
          :loading="loadingPayUrl"
      >立即支付
      </van-button
      >
      <!-- <div class="button" @click="onConfirm">立即支付</div> -->
    </div>
  </van-sticky>
  <van-skeleton :row="20" v-if="loading"/>

</template>

<script setup lang="ts">
import OrderDetailInfo from '@/views/activityPages/components/order-detail-info.vue';
import {showConfirmDialog} from 'vant';
import {useRouter, useRoute} from 'vue-router';
import api from '@/api/index';
import {
  defineComponent,
  reactive,
  ref,
  defineProps,
  getCurrentInstance,
} from 'vue';

import ReservationType from '@/views/activityPages/const/reservation';
import {goPayUrl} from '@/utils/pay';
import QRBanner from "@/views/order-detail/components/QRBanner.vue";
import {orderStatusEnum} from "@/views/activityPages/const/orderStatus.ts";
import {shouldHideBtn} from "@/utils/wx-utils.ts";

const router = useRouter();
const route = useRoute();

function toRefundList() {
  const refundNumbers = detail.value?.refundNumber?.split(',');
  if (refundNumbers?.length === 1) {
    router.push('/refund-detail?id=' + detail.value?.refundNumber);
  } else {
    router.push(`/refund-list?id=${route.params.id}`)
  }
}

let coins = 11;
let price = 11;
const csPop = ref(null);

function showCsDialog() {
}

function toRefund() {
  router.push({
    path: '/scenic/refund/' + route.params.id,
    query: {
      type: route.query.type
    }
  });
}

function close() {
  csPop.value.close();
}

function confirm() {
  csPop.value.close();

  uni.makePhoneCall({
    phoneNumber: '12312312313',
    success: () => {
      console.log('拨打电话成功！');
    },
    fail: () => {
      console.error('拨打电话失败！');
    },
  });
}

const detail = ref(null);
const loading = ref(false)
const getOrderInfo = route.query.type === 'coupon' ? api.getCouponOrderInfo : api.getOrderInfo

function getDetail() {
  loading.value = true
  getOrderInfo({
    orderNumber: route.params.id,
  })
      .then((res) => {
        if (res.code == '200') {
          detail.value = res.data;
          coins = 0;
          price = res.data.actualPrice;
        }
      }).finally(() => {
    loading.value = false
  });
}

getDetail();
const loadingPayUrl = ref(false);

function toPay() {
  loadingPayUrl.value = true;
  api
      .getPayld({
        orderNumber: route.params.id,
        finishUrl: shouldHideBtn() ? null : window.location.origin + '/#' + `activity-order/${route.params.id}`
      })
      .then((res) => {
        if (res.code == '200') {
          goPayUrl({payId: res.data.payNumber});
        }
      })
      .finally(() => {
        loadingPayUrl.value = false;
      });
}
</script>

<style lang="scss" scoped>
@import url('@/views/activityPages/style/card.css');

.wrap {
  background: #f9f8f3;
  overflow: scroll;
  height: 100%;
}

.text1 {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
  padding-bottom: 5px;
}

.text2 {
  line-height: 14px;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.row1 {
  justify-content: space-between;
  padding-bottom: 10px;
  width: 100%;
}
</style>
